<html>
	<title>航线图-高德地图-贝塞尔曲线-三角函数版</title>
	<head>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.custom {
				position: absolute;
				top: 0;
				left: 0;
			}
		</style>
		<script src="https://webapi.amap.com/loader.js"></script>
		<script type="text/javascript" >
			// 起点终点坐标路径1
			var line1 = [[112.632999,37.752363], [121.473667,31.230525]];
			
			// 根据起点终点坐标算出贝塞尔曲线路径
			function getPath(line) {
				var startPoint = [line[0]];
				var endPoint = [getConsolePoint(line), line[1]]; // 控制点，终点
				return [startPoint, endPoint];
			}
			
			// 根据起点终点坐标算出控制点坐标
			function getConsolePoint(line) {
				// A点坐标
				var A = line[0];
				var Ax = A[0];
				var Ay = A[1];
				// B点坐标
				var B = line[1];
				var Bx = B[0];
				var By = B[1];
				// A,B中点D坐标
				var D = [(Bx-Ax)/2 + Ax, (By-Ay)/2 + Ay];
				var Dx = D[0];
				var Dy = D[1];
				// CD所在直线方程 y = a*x + b
				// y = - (Bx - Ax)/(By - Ay)*x + b
				// b = Dy + (Bx - Ax)/(By - Ay) * Dx
				// y =  - (Bx - Ax)/(By - Ay)*x + (Dy + (Bx - Ax)/(By - Ay) * Dx)
				var a1 = - (Bx - Ax)/(By - Ay);
				var b1 = Dy + (Bx - Ax)/(By - Ay) * Dx;
				var β = Math.atan((By - Ay)/(Bx - Ax));
				// 设∠BAC = α = Math.PI / 180 * 30 ;
				var α = Math.PI / 180 * 30 ;
				// AC所在直线方程 y = a2*x + b2
				var a2 = Math.tan(β - α);
				b2 = Ay - a2*Ax;
				// 已知两条直线方程，求交点C坐标
				var Cx = (b1 - b2) / (a2 - a1);
				var Cy = Cx * a1 + b1;
				
				return [Cx,Cy];
			}
			
			
		
			window.onload = function() {
				AMapLoader.load({
					"key": "711470f44f816b6ef27017215f5cb857",              // 申请好的Web端开发者Key，首次调用 load 时必填
					"version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
					"plugins": ['AMap.Scale','AMap.ToolBar', 'AMap.Geocoder'],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
					"AMapUI": {             // 是否加载 AMapUI，缺省不加载
						"version": '1.1',   // AMapUI 缺省 1.1
						"plugins":[],       // 需要加载的 AMapUI ui插件
					}
				}).then((AMap)=>{
					var map = new AMap.Map('container', {
						mapStyle: 'amap://styles/dark', //设置地图的显示样式 幻影黑
					});
					//贝赛尔曲线经过的起点，途经点，控制点，终点的二维数组
					var startPoint = [[116.39, 39.9]]; // 起点
					var viaPoint1 = [[116.39, 39.9], [106.39, 38.9]]; // 控制点，途经点
					var viaPoint2 = [[116.39, 39.9], [106.39, 38.9], [106.39, 38.9]]; // 控制点，控制点，途经点
					var endPoint = [[116.39, 39.9], [106.39, 38.9]]; // 控制点，终点
					var path = [
					  startPoint,
					  viaPoint1,
					  viaPoint2,
					  endPoint
					];
					/*
					var bezierCurve = new AMap.BezierCurve({
						path: getPath(line1),
						strokeWeight: 2, // 线条宽度
						strokeOpacity: 0.8,
						strokeColor: '#87CEEB', // 线条颜色
					});
					map.add(bezierCurve);
					// 缩放地图到合适的视野级别
					map.setFitView([ bezierCurve ]);
					*/
					var geocoder = new AMap.Geocoder({
						// city: "010", //城市设为北京，默认：“全国”
					});
					
					document.getElementById("addAirline").onclick = function() {
						var start = document.getElementById("start").value;
						var end = document.getElementById("end").value;
						geocoder.getLocation(start, function(status, result) {
							if (status === 'complete'&&result.geocodes.length) {
								// 起点坐标
								var lnglatStart = result.geocodes[0].location;
								geocoder.getLocation(end, function(status, result) {
									if (status === 'complete'&&result.geocodes.length) {
										// 终点坐标
										var lnglatEnd = result.geocodes[0].location;
										// 曲线
										var bezierCurve = new AMap.BezierCurve({
											path: getPath([[lnglatStart.KL, lnglatStart.kT], [lnglatEnd.KL, lnglatEnd.kT]]),
											strokeWeight: 2, // 线条宽度
											strokeOpacity: 0.8,
											strokeColor: '#87CEEB', // 线条颜色
										});
										map.add(bezierCurve);
										// 缩放地图到合适的视野级别
										map.setFitView();
									}else{
										log.error('根据地址查询位置失败');
									}
								});
							}else{
								log.error('根据地址查询位置失败');
							}
						});
					}
					
					
				}).catch((e)=>{
					console.error(e);  //加载错误提示
				});
				
			}
			
		</script>
		
	</head>
	<body>
		<div id="container" tabindex="0" style="height: 100%;">
			<div class="shadow"></div>
		</div>
		<div class="custom">
			<input id="start">
			<input id="end">
			<button id="addAirline">添加</button>
		</div>
	</body>
</html>